@font-face {
  font-family: 'Marydale';
  font-weight: 400;
  font-display: auto;
  src: url('../font/Marydale.ttf');
}

@font-face {
  font-family: 'SentyTEA';
  font-weight: 400;
  font-display: auto;
  src: url('https://cdn.jsdelivr.net/gh/Redloney/CDN@1.2/static/font/SentyTEA.ttf');
}

@font-face {
  font-family: 'oppo';
  font-weight: 400;
  font-display: auto;
  src: url('https://cdn.jsdelivr.net/gh/Redloney/CDN@1.2/static/font/opposans400.ttf')format("truetype");
}

@import url("https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css");

@import url('./cursor.scss');

// iconfont 
.App {
  width: 100%;
  min-height: 100vh;
  // background: #4CA1AF;
  // background: -webkit-linear-gradient(to bottom, #006273, #00697b, #4CA1AF);
  // background: linear-gradient(to bottom, #006273, #00697b, #4CA1AF);
}

:root {
  scroll-behavior: smooth;
}

body {
  width: 100vw !important;
  scroll-behavior: smooth;
  // cursor: url("https://bntx.ml/usr/plugins/AliceStyle/static/mouse/fireworks/normal.cur"), default;

  &::-webkit-scrollbar {
    display: none;
    /*滚动条整体样式*/
    width: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background-color: #40a9ff;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent);
  }


  &::-webkit-scrollbar-track {
    border-radius: 10px;
  }

}

#emoji {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 320px;
  height: 120px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    background-color: #333;
    display: none;
  }

  li {
    font-size: 18px;
    padding: 5px;
    transform-origin: center;
    transition: 100ms linear;
    cursor: pointer;
    user-select: none;

    &:hover {
      transition: 100ms ease;
      background-color: #eee;
    }
  }
}



#emoji.emoticon {
  li {
    padding: 5px;
    font-size: 14px !important;

    &:hover {
      background: #eee;
      box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
      animation: animJelly 1s ease-in-out;
    }
  }
}